<template>
	<div class="container">
		<div class="detailTitle">
			<h4>导入业务结果</h4>
		</div>
		<YdTable
			:formData="queryParams"
			:tableConfig="tableConfig"
			:tableData="tableData.data"
			ref="multipleTable"
			@sizeChangeHandler="handlerQuery"
			@currentChangeHandler="handlerQuery"
			class="table"
		></YdTable>
	</div>
</template>

<script setup name="BusiStepDetails" lang="tsx">
import { getStepLsit } from '@/api/admin/businessMonitor/businessStepBatchImport';
import { onActivated, onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

let queryParams = reactive({
	pageNum: 1,
	pageSize: 10,
	...route.query,
});
let tableData = reactive({
	data: [],
	total: 0,
});
let tableConfig = reactive({
	// url: getStepLsit,
	columns: [
		{
			label: '流水号',
			prop: 'dataNumber',
			width: 200,
		},
		{
			label: '序号',
			prop: 'sequenceNumber',
			width: 150,
		},
		{
			label: '步骤名称',
			prop: 'stepName',
			width: 200,
		},
		{
			label: '状态',
			prop: 'dealStatus',
			width: 100,
			renderXss: (row: any, val: any) => {
				let color = '';
				if (val === 0) {
					val = '成功';
				} else {
					color = 'red';
					val = '失败';
				}
				const cls = { color: color };
				return <span style={cls}>{val}</span>;
			},
		},
		{
			label: '失败原因',
			prop: 'reason',
			showOverFlowToolTip: true,
		},
		{
			label: '步骤类型',
			prop: 'stepType',
			width: 150,
		},
		{
			label: '是否允许失败',
			prop: 'isAllowFail',
			width: 110,
		},
		{
			label: '是否可缺失',
			prop: 'isAllowLose',
			width: 100,
		},
		{
			label: '是否确认',
			prop: 'confirmFlag',
			width: 100,
		},
		{
			label: '业务资源',
			prop: 'resource',
			showOverFlowToolTip: true,
		},
	],
	// 开启复选框
	enableSelection: false,
	// 开启分页
	pagination: {
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
	// 加载层
	loading: false,
	// 关闭序号
	disableOrderNumber: false,
});

onActivated(() => {
	queryParams.pageNum = 1;
	handlerQuery();
});
onMounted(() => {
	queryParams.pageNum = 1;
	handlerQuery();
});

function handlerQuery() {
	getList();
}
function getList() {
	// tableConfig.loading = true;
	getStepLsit({
		...queryParams,
		...route.query,
	}).then((response: ApiResponse | any) => {
		tableConfig.loading = false;
		if (response.code != 0) {
			proxy.$modal.msgError(response.msg);
			return;
		} else if (response.code == 0 && response.data.records.length > 0) {
			tableData.data = response.data.records;
			tableConfig.pagination.total = response.data.total;
		}
	});
}
</script>

<style lang="scss" scoped>
.detailTitle {
	margin: 0 25px 25px 25px;
}
.table {
	padding: 0 0 0 20px;
}
</style>
